<template>
  <PageLayout page-style="background: #f3f7f8; padding: 16rpx;">
    <view class="invoice-form">
      <view class="form-item">
        <text class="label">订单编号</text>
        <text class="value">1655451511515151515</text>
      </view>

      <view class="form-item">
        <text class="label">开票金额</text>
        <text class="value" style="color: #F25A27;">¥99.99</text>
      </view>
      <div class="bar"></div>

      <view class="form-item">
        <text class="label">发票类型</text>
        <view class="value with-arrow" style="margin-left: auto; justify-content: flex-end;">
          <text>增值税普通发票   </text>
          <text class="arrow">    ></text>
        </view>
      </view>

      <view class="form-item">
        <text class="label">抬头类型</text>
        <view class="toggle-group" style="margin-left: auto;     justify-content: flex-end;">
<!--          <view class="toggle-item" :class="{ active: headerType === 'personal' }" @click="">个人</view>-->
<!--          <view class="toggle-item" :class="{ active: headerType === 'company' }" @click="">企业</view>-->
          <u-radio-group v-model="headerType" active-color="#F25A27" >
            <u-radio @click="headerType = 'personal'" :name="'personal'">个人</u-radio>
            <u-radio @click="headerType = 'company'" :name="'company'">企业</u-radio>
          </u-radio-group>
        </view>
      </view>

      <view class="form-item">
        <text class="label">发票抬头</text>
        <input v-model="invoiceHeader" class="input" type="text" :placeholder="headerType === 'personal' ? '请输入开票人姓名' : '请输入企业名称'" />
      </view>

      <view v-if="headerType === 'company'" class="form-item">
        <text class="label">纳税号</text>
        <input v-model="taxNumber" class="input" type="text" placeholder="请输入纳税号" />
      </view>

      <view v-if="headerType === 'company'" class="form-item">
        <text class="label">开户银行</text>
        <input v-model="bankName" class="input" type="text" placeholder="选填" />
      </view>

      <view v-if="headerType === 'company'" class="form-item">
        <text class="label">银行账号</text>
        <input v-model="bankAccount" class="input" type="text" placeholder="选填" />
      </view>

      <view v-if="headerType === 'company'" class="form-item">
        <text class="label">企业地址</text>
        <input v-model="companyAddress" class="input" type="text" placeholder="选填" />
      </view>

      <view v-if="headerType === 'company'" class="form-item">
        <text class="label">企业电话</text>
        <input v-model="companyPhone" class="input" type="text" placeholder="选填" />
      </view>
      <div class="bar"></div>

      <view class="form-item">
        <text class="label">邮箱地址</text>
        <input v-model="email" class="input" type="text" placeholder="请输入接收发票邮箱" />
      </view>

      <div class="btns">
        <div class="btn is-success" @click="submitInvoice">提交申请</div>
      </div>
    </view>
  </PageLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PageLayout from '@/components/PageLayout.vue';

const headerType = ref<'personal' | 'company'>('personal');
const invoiceHeader = ref('');
const taxNumber = ref('');
const bankName = ref('');
const bankAccount = ref('');
const companyAddress = ref('');
const companyPhone = ref('');
const email = ref('');

const submitInvoice = () => {
  // 表单提交逻辑
  console.log('提交发票申请', {
    headerType: headerType.value,
    invoiceHeader: invoiceHeader.value,
    taxNumber: taxNumber.value,
    bankName: bankName.value,
    bankAccount: bankAccount.value,
    companyAddress: companyAddress.value,
    companyPhone: companyPhone.value,
    email: email.value,
  });

  // 这里可以添加实际的提交逻辑，如API调用
  uni.showToast({
    title: '提交成功',
    icon: 'success',
  });
};
</script>

<style scoped lang="scss">
.bar {
  width: 100%;
  height: 16rpx;
  background: #F3F7F8;
}
.invoice-form {
  background-color: #fff;

  padding: 0 0 400rpx;
  .form-item {
    display: flex;
    align-items: center;
    padding: 24rpx 24rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .label {
      width: 180rpx;
      font-size: 28rpx;
      color: #333;
    }

    .value {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      text-align: right;

      &.with-arrow {
        display: flex;
        justify-content: space-between;

        .arrow {
          color: #999;
        }
      }
    }

    .input {
      flex: 1;
      height: 60rpx;
      font-size: 28rpx;
      color: #333;
      text-align: right;
    }

    .toggle-group {
      display: flex;
      flex: 1;

      .toggle-item {
        width: 120rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        border-radius: 30rpx;
        margin-right: 20rpx;
        background-color: #f5f5f5;
        color: #666;
        font-size: 26rpx;

        &.active {
          background-color: #007aff;
          color: #fff;
        }
      }
    }
  }

  .btns {
    width: 100vw;
    position: fixed;
    bottom: 0px;
    left: 0;
    height: 168rpx;
    background: #FFFFFF;
    box-shadow: 0rpx -2rpx 4rpx 2rpx rgba(9,9,9,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16rpx;
    padding: 0 32rpx;
    z-index: 10;

    .btn {
      width: 100%;
      height: 72rpx;
      background: #f3f7f8;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #6f6f6f;
      line-height: 72rpx;
      text-align: center;

      &.is-success {
        background: linear-gradient(90deg, #f32f1a 0%, #f68a2d 100%);
        color: #ffffff;
      }
    }
  }
}
</style>
